import React, { Component } from 'react'
import MenuConfig from './../../config/menuConfig'
import { NavLink } from 'react-router-dom'
import './index.less'
import { Menu, } from 'antd'
const SubMenu = Menu.SubMenu
export default class Footer extends Component{
    componentWillMount() {
        const menuTreeNode = this.renderMenu(MenuConfig)
        this.setState({
            menuTreeNode
        })
    }
    renderMenu = (data) => {
        return data.map((item) => {
            if (item.children) {
                return (
                    <SubMenu title={item.title} key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            let path = '/admin' + item.key
            return (
                <Menu.Item title={item.title}  key={item.key}>
                    <NavLink to={path}>
                        {item.title}
                    </NavLink>
                </Menu.Item>
            )
        })
    }
    render(){
        return (
            <div>
                <div className="logo">
                    <img src="./assets/logo-ant.svg" alt=""/>
                    <h1>Yun He</h1>
                </div>
                <Menu theme="dark">
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}